<template>

    <p>sum: {{ sum }}</p>
    <button @click="updateSum">加1</button>

    <p>person: {{ person }}</p>
    <button @click="updatePerson">改名</button>

    <p>personReactive: {{ personReactive }}</p>
    <button @click="updatePersonAddress">改地址</button>
    <button @click="updatePersonJob">改工作</button>

</template>

<script setup lang="ts">
import {shallowReactive, shallowRef} from "vue";

let sum = shallowRef(100)
let person = shallowRef({ name: "zs", address: "hefei" , job:{
    sal:20,
    lever:1
}});
let personReactive = shallowReactive({ name: "zs", address: "hefei" , job:{
    sal:20,
    lever:1
}});


// 输出
console.log("sum=",sum)
console.log("person=",person)
console.log("personReactive=",personReactive)

function updateSum() {
  sum.value++
}

function updatePerson() {
  person.value.name = 'zs1'
}

function updatePersonAddress() {
  personReactive.address = 'nanjing'
}

function updatePersonJob() {
   personReactive.job.sal = 21
}



</script>